﻿
<script src="~/Scripts/DashboardControllers/ChurchDashboardController.js"></script>
<section class="content" ng-controller="ChurchDashboardController">

    <div class="wrapper container-fluid" style="padding: 0px;">
        <div class="row">
            <div class="col-md-3 col-sm-6">
                <div class="bg-success bs-0 mb-20 clearfix">
                    <div class="pull-left bg-op p-15 text-center">
                        <div class="easy-pie-chart fs-30" data-percent="10" data-bar-color="#FFF" data-track-color="rgba(255,225,255,.5)" data-line-width="3" data-size="70" data-animate='{ "duration": 2000, "enabled": true }' style="width: 70px; height: 70px; padding: 5px; line-height: 60px">
                            <i class="fa fa-user"></i>
                        </div>
                    </div>
                    <div class="pull-left p-20">
                        <h5 class="m-0 fs-16 text-uppercase lh-1">Family</h5>
                        <span class="fw-600 fs-30">{{chuchinfo.ActiveFamily}}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="bg-green bs-0 mb-20 clearfix">
                    <div class="pull-left bg-op p-15 text-center">
                        <div class="easy-pie-chart fs-30" data-percent="30" data-bar-color="#FFF" data-track-color="rgba(255,225,255,.5)" data-line-width="3" data-size="70" data-animate='{ "duration": 2000, "enabled": true }' style="width: 70px; height: 70px; padding: 5px; line-height: 60px">
                            <i class="fa fa-users"></i>
                        </div>
                    </div>
                    <div class="pull-left p-20">
                        <h5 class="m-0 fs-16 text-uppercase lh-1">Members</h5>
                        <span class="fw-600 fs-30">{{chuchinfo.ActiveFamilyMembers}}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="bg-info bs-0 mb-20 clearfix">
                    <div class="pull-left bg-op p-15 text-center">
                        <div class="easy-pie-chart fs-30" data-percent="75" data-bar-color="#FFF" data-track-color="rgba(255,225,255,.5)" data-line-width="3" data-size="70" data-animate='{ "duration": 2000, "enabled": true }' style="width: 70px; height: 70px; padding: 5px; line-height: 60px">
                            <i class="fa fa-user"></i>
                        </div>
                    </div>
                    <div class="pull-left p-20">
                        <h5 class="m-0 fs-16 text-uppercase lh-1">Baptised</h5>
                        <span class="fw-600 fs-30">{{chuchinfo.BaptisedMembers}}</span>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-sm-6">
                <div class="bg-gray bs-0 mb-20 clearfix">
                    <div class="pull-left bg-op p-15 text-center">
                        <div class="easy-pie-chart fs-30" data-percent="60" data-bar-color="#FFF" data-track-color="rgba(255,225,255,.5)" data-line-width="3" data-size="70" data-animate='{ "duration": 2000, "enabled": true }' style="width: 70px; height: 70px; padding: 5px; line-height: 60px">
                            <i class="zmdi zmdi-account"></i>
                        </div>
                    </div>
                    <div class="pull-left p-20">
                        <h5 class="m-0 fs-16 text-uppercase lh-1">Non Baptised</h5>
                        <span class="fw-600 fs-30 ">{{chuchinfo.NonBaptisedMembers}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-md-6">
            <div class="bg-white bs-0 mb-20 p-20">
                <div class="clearfix">
                    <h3 class="pull-left fs-16 lh-1 m-0 text-uppercase">Birthday</h3>
                    <div class="pull-right fs-16 lh-1">
                        <div class="btn-group">
                            <a href="#" class="text-black dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <i class="zmdi zmdi-settings"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right animated fadeInLeft">
                                <li><a href="#">Send sms to all</a></li>
                                <li><a href="#">Send mail to all</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <hr class="mt-10 mb-10">
                <div class="malihu-scrollbar" data-theme="light" data-auto-hide-scrollbar="true" data-scroll-amount="250" style="height: 368px;">
                    <div class="media mt-20" ng-show="BirthDay.length>0" ng-repeat="data in BirthDay">
                        <div class="media-left">
                            <a href="#">
                                <i class="fa fa-gift fs-36"></i>
                            </a>
                        </div>
                        <div class="media-body media-middle">
                            <p class="fs-16 fw-600 mb-0 pl-10"><a href="#">{{data.Name}}</a> Celebrating {{data.CurrentAge}} th Birth Day <a><i class="fa fa-phone pull-right"></i></a><a><i class="fa fa-envelope pull-right"></i></a></p>
                            <p class="text-muted mb-0 pl-10">Family Head Name : {{data.FatherName}}</p>
                            <p class="fs-12 text-muted mb-0 pl-10">Today <a>{{data.Email}}</a>|<a> {{data.Phone}}</a></p>
                        </div>
                        <hr class="mt-10 mb-10">
                    </div>
                    <div class="media mt-20" ng-show="BirthDay.length==0">
                        <div class="media-left">
                            <a href="#">
                                <i class="fa fa-gift fs-36"></i>
                            </a>
                        </div>
                        <div class="media-body media-middle">
                            <p class="fs-16 fw-600 mb-0 pl-10"><a href="#">No One Celebrating Birthday Today</p>
                        </div>
                        <hr class="mt-10 mb-10">
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</section>
